import {Tabs, Tab} from '@theme'

# Async Startup in Module Federation

> Sep 5, 2024

We're excited to announce a new experimental feature: `experiments.asyncStartup = true`.

This release introduces **asynchronous startup**, enabling automatic async initialization for Module Federation entrypoints.

## 🚀 Key Features

### Automatic Async Initialization

With async startup enabled, **dynamic imports (`import()`) at the top of your app are no longer required**. All entrypoints will now initialize asynchronously by default. This means:
- No more eager errors
- No need for "async boundaries" in userland code
- Automatic handling of async initialization

:::note
This only affects entry point initialization. You can still use dynamic imports normally throughout your application, including for importing remote modules. This feature doesn't change or limit how dynamic imports work in your code.
:::

:::tip
**Note:** Asynchronous entrypoints will always export a promise. This is particularly relevant if you're manually requiring a bundled entrypoint or exposing something like a UMD library to the global scope.
:::

#### Before & After Comparison

See how the new async behavior simplifies entrypoints. Click on the "Before" and "After" tabs to see the difference.

<Tabs>
  <Tab label="Before">
    ```jsx
    // entrypoint
    import('./bootstrap.js')

    // bootstrap.js
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';

    const root = ReactDOM.createRoot(document.getElementById('root')!);
    root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    );
    ```
  </Tab>
  <Tab label="After">
    ```jsx
    // entrypoint
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';

    const root = ReactDOM.createRoot(document.getElementById('root')!);
    root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    );
    ```
  </Tab>
</Tabs>

### Important Notes

When using async startup:
- All entrypoints initialize asynchronously by default
- Exports from entrypoints will be promises that resolve to the actual exports
- No manual async boundaries or dynamic imports needed
- Eager consumption errors are automatically prevented through async initialization

This feature simplifies Module Federation setup by removing the need for manual async handling while ensuring proper initialization of federated modules.

